<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hover Transition</title>
    <style media="screen">
        a{
            font-family: Helvetica,Arial,sans-serif;
            text-decoration: none;
            color: #ffffff;
        }

        .button{
            padding:0.75rem 1rem;
            border-radius: 0.3rem;
            box-shadow: 0;
            background-color: #bbbbbb;
        }
        .button:hover{
            background-color: #ee2222;
            box-shadow: 0 4px #990000;
            transition:0.5s ;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Hover Me!</a>
</body>
</html>